<template>
	<view class="container">
		<view class="content">
			<view class="info">
				<view class="icon success" v-if="showStatus == 'success' && showStatus != ''">
					<uni-icons type="checkmarkempty" size="50" color="#fff"></uni-icons>
				</view>
				<view class="icon error" v-if="showStatus == 'error' && showStatus != ''">
					<uni-icons type="closeempty" size="50" color="#fff"></uni-icons>
				</view>
				<view class="text" style="margin-top: 10px;">
					{{ msg }}
				</view>
				<view class="second">
					{{ seconds }}秒后跳转
				</view>
				<button type="primary" class="btn" @click="pageTo()">立即跳转</button>
			</view>
		</view>
	</view>
</template>

<script>
import Header from '../../components/header.vue'
import request from '../../common/request.js'
import signIn from '../../common/signIn.js'
export default {
	components: {
		Header
	},
	data() {
		return {
			id: '',
			type: '',
			data: {},
			showStatus: '',
			msg: '',
			seconds: 4
		}
	},
	onLoad(options) {
		this.id = options.meet_id
		this.type = options.codeType
	},
	mounted() {
		let userInfo = uni.getStorageSync('userInfo')
		if (!userInfo) {
			uni.navigateTo({
				url: '/pages/login'
			})
			return false
		} else {
			signIn(this.id, this.type, null, (res) => {
				if (res.status) {
					this.showStatus = 'success'
					this.msg = '签到成功'
				} else {
					this.showStatus = 'error'
					this.msg = res.msg
				}
				this.countdown()
				let timeout = setTimeout(() => {
					clearTimeout(timeout)
					this.pageTo()
				}, 3000)
			})
		}
	},
	methods: {
		countdown() {
			if (this.seconds > 0) {
				this.seconds--;
				setTimeout(this.countdown, 1000);
			} else {
				this.seconds = 4
			}
		},
		pageTo() {
			uni.navigateTo({
				url: '/pages/index'
			})
		}
	}
}
</script>

<style scoped>
.second {
	font-size: 14px;
	color: #ccc;
	text-align: center;
	margin-top: 20px;
}

.btn {
	margin: 15px 0px;
	font-size: 14px;
	padding: 5px;
	border-radius: 8px;
	background-color: #2C60BE;
	width: 100%;
}

.content {
	padding: 20px;
}

.info {
	position: fixed;
	top: 30%;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	line-height: 26px;
	width: 80%;
}

.icon {
	width: 80px;
	height: 80px;
	line-height: 80px;
	border-radius: 50%;
	display: inline-flex;
	justify-content: center;
}

.success {
	background-color: #09a884;
}

.error {
	background-color: #ea5c55;
}
</style>